<script setup>


import {useRoute} from "vue-router";
import {inject, reactive, ref, toRefs} from "vue";
import {getOrderInfoFromOrderIdService, getOrderItemService} from "@/api/cartOrder";

const route=useRoute();
const orderId=reactive(route.query.orderId);
const orderItemData=ref([])
const OrderInfo=ref([])
const totalPrice=ref([0]);
const isSearch = inject('isSearch')
isSearch.value=false;

const getOrderData=async(orderId)=> {
  console.log('orderId='+orderId)
  const data = await getOrderItemService(orderId);
  const data2 = await getOrderInfoFromOrderIdService(orderId);
  console.log('getOrderInfoFromOrderIdService  data.status = ' + data.status);
  if (data.status == 1) {
    orderItemData.value = data.data;
    console.log('data.data=', JSON.stringify(data.data));
  } else {
    alert('confirmOrder失败');
  }
  if(data2.status==1){
    OrderInfo.value=data2.data;
    console.log(JSON.stringify(data2.data))
  }else{
    alert('confirmOrder失败');
  }
  getTotal();
}

getOrderData(orderId);

const itemPriceTotal=(item)=>{
  return item.quantity*item.unitprice;
}

const getTotal=()=>{
  let sum = 0;
  // 使用 toRefs 将 data 转换为 ref 对象
  const refs = toRefs(orderItemData.value);
  // 遍历 ref 对象，并将值添加到数组中
  const dataArray = Object.values(refs).map(ref => ref.value);
  // 遍历数组，计算总和
  dataArray.forEach(CartItem => {
    sum += itemPriceTotal(CartItem);
  });
  totalPrice.value= sum;
}
</script>

<template>
  <div id="show">
    <div id="petName">Order Information</div>
    <div id="orderContent">
      <div id="itemInfoContent">
        <table id="ItemOrderTable">
            <caption align="top">Goods Information</caption>
          <thead>
            <td class="itemOrderTableTitle">Item Id</td>
            <td class="itemOrderTableTitle">Quantity</td>
            <td class="itemOrderTableTitle">Total Price</td>
            </thead>
          <tr v-for="item in orderItemData" :key="item.itemid">
            <td class="itemOrderTableInfo">{{ item.itemid }}</td>
            <td class="itemOrderTableInfo">{{ item.quantity }}</td>
            <td class="itemOrderTableInfo">{{ itemPriceTotal(item) }}</td>
          </tr>
<!--          <tr th:each="item:${lineItems}">-->
<!--            <td class="itemOrderTableInfo">-->
<!--              <span class="itemInfo" th:text="${item.itemid}" name="itemid">ItemId</span>-->
<!--            </td>-->
<!--            <td class="itemOrderTableInfo">-->
<!--              <span class="itemInfo" th:text="${item.quantity}" name="quantity">x2</span>-->
<!--            </td>-->
<!--            <td class="itemOrderTableInfo">-->
<!--              <span class="itemInfo" th:text="'$'+ ${item.unitprice * item.quantity}" name="totalprice">总价</span>-->
<!--            </td>-->
<!--          </tr>-->
        </table>
      </div>

      <div>
        <table  class="accountOrderTable" id="orderDetailsTab">
          <caption align="top">address Information</caption>
<!--          <tr>-->
<!--            <th colspan="2">address Information</th>-->
<!--          </tr>-->
          <tr>
            <td class="accountOrderTableTitle">收件人：</td>
            <td class="accountOrderTableInfo" name="username">
              {{ OrderInfo.username}}</td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">First name:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.billtofirstname || ''" type="text" name="billtofirstname" readonly />
            </td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">Last name:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.billtolastname ||''" type="text" name="billtolastname" readonly/>
            </td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">Address 1:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.billaddr1 || ''" type="text" name="billaddr1" readonly/>
            </td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">Address 2:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.billaddr2 || ''" type="text" name="billaddr2" readonly/>
            </td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">City:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.billcity ||''" type="text" name="billcity" readonly/>
            </td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">State:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.billstate ||''" type="text" name="billstate" readonly/>
            </td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">Zip:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.billzip || ''" type="text" name="billzip" readonly/>
            </td>
          </tr>
          <tr>
            <td class="accountOrderTableTitles">Country:</td>
            <td class="accountOrderTableInfos"><input :value="OrderInfo.shipcountry ||''" type="text" name="shipcountry" readonly/></td>
          </tr>
          <tr>
            <th colspan="2" id="shipAdd">Shipping Address</th>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">First name:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.shiptofirstname || ''" type="text" name="shiptofirstname" readonly/></td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">Last name:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.shiptolastname|| ''" type="text" name="shiptolastname" readonly/></td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">Address 1:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.shipaddr1|| ''" type="text" name="shipaddr1" readonly/></td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">Address 2:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.shipaddr2 || ''" type="text" name="shipaddr2" readonly/></td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">City:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.shipcity || ''" type="text" name="shipcity" readonly/></td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">State:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.shipstate ||''" type="text" name="shipstate" readonly/></td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">Zip:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.shipzip ||''" type="text" name="shipzip" readonly/></td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">Country:</td>
            <td class="accountOrderTableInfo"><input :value="OrderInfo.shipcountry ||''" type="text" name="shipcountry" readonly/></td>
          </tr>
          <tr>
            <td class="accountOrderTableTitle">订单编号：</td>
<!--            <td class="accountOrderTableInfo" name="orderid"> <input id="total" :value="orderId" type="text" name="totalprice" readonly="readonly"></td>-->
            <td class="accountOrderTableInfo"><input :value="orderId ||''" type="text" name="orderid" readonly/></td>
          </tr>
<!--          <tr>-->
<!--            <td class="accountOrderTableTitle">合计:</td>-->
<!--            <td class="accountOrderTableInfo">-->
<!--              <input id="total" :value="'$' + totalPrice" name="totalprice" readonly="readonly">-->
<!--            </td>-->
<!--          </tr>-->
        </table >
        <div id="totalTag">
          <button > <span>合计:${{totalPrice}}</span>
<!--            <input id="total" name="totalprice" readonly="readonly" :value="totalPrice" >-->
          </button>

        </div>

      </div>
    </div>
  </div>
</template>

<style>

#shipAdd{
  color: #fff;
  background-color: #35813b;
  border-bottom: 2px solid #37833d;
  border-right: 1px solid #c1efca;
  border-top: 1px solid #97d690;
  /*text-align: center;*/
  text-shadow: -1px -1px 1px #666666;
  letter-spacing: 2px;
  width:100%;
  font-weight: bold;
  height:30px;
  vertical-align: center;
  padding-top: 10px;
  font-size: 20px;
}

input#total{
  border:none;
  outline: none;
  width: 75px;
  font-size: 18px;
}
#orderDetailsTab{
  margin-left: 6%;
  margin-top: 3%;
  margin-bottom: 20px;
}
#totalTag{
  margin-bottom: 2%;
}
#totalTag button{
  width: 90%;
}
</style>